<template>
  <div class="sonBox">
    <div class="cells" v-for='cell in item.cellList' :key='cell.id' :class="{ active: cell.xiao }">
      <img :src="cell.src" />
      <div :style="{ backgroundColor: item.bgcolor }" class="bor_bot"></div>
    </div>
    <JiaList :item='item' />
  </div>
</template>

<script>
import JiaList from './JiaList.vue'
export default {
  name: "jiaSon",
  props: ["item"],
  components: {JiaList}
};
</script>

<style lang="less" scoped>
.sonBox {
  width: 7.2rem;
  margin: 0 auto;
  .cells {
    width: 7.2rem;
    height: 1.4rem;
    &.active {
      height: 1.266rem;
      .bor_bot {
        width: 100%;
        height: 0.0266rem;
      }
    }
    img {
      width: 100%;
      height: 1.24rem;
    }
    .bor_bot {
        width: 100%;
        height: .16rem;
    }
  }
  
}
</style>